*{
    margin: 0;
    padding: 0;
}
.nav{
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #e4e4e4;
}
.box{
    overflow: hidden;
    position: relative;
    width: 100%;
    height: calc(100vh - 50px);
    .mask{
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 5000;
        left: 0;
        top: 0;
        background-color: transparent;
    }
    .plane{
        position: absolute;
        width: 43px;
        height: 33px;
        left: 3%;
        top: calc(40% - 15px);
        background-image: url(../images/plane.png);
        z-index: 100;
        animation: planeIn 0.5s linear;
        @keyframes planeIn {
            from{
                left: -50px;
            }to{
                left: 2%;
            }
        }
        .exhaust{
            width: 42px;
            height: 42px;
            position: absolute;
            left: -42px;
            top: -5px;
            background-image: url(../images/exhaust.png);
            background-size: cover;
            transform: rotate(90deg);
            animation: exhaust 0.1s linear infinite;
            @keyframes exhaust {
                from{
                    opacity: 0.5;
                }to{
                    opacity: 1;
                }
            }
        }
    }
    .fire{
        position: absolute;
        width: 10px;
        height: 5px;
        background-color: red;
        z-index: -100;
        background-image: linear-gradient(to right, white, rgb(9, 239, 12));
        border-radius: 0 45% 45% 0;
    }
    .tank{
        position: absolute;
        top: calc(40% - 44px);
        width: 54px;
        height: 84px;
        display: inline-block;
        transform: rotate(90deg);
        transition: 0.5s;
        animation: tankIn 0.2s linear;
        left: calc(100% - 80px);
        @keyframes tankIn {
            from{
                left: calc(100% + 60px);
            }to{
                left: calc(100% - 80px);
            }
        }
        .hp{
            position: absolute;
            width: 30px;
            height: 100%;
            line-height: 20px;
            font-size: 16px;
            color: yellowgreen;
            top: 0;
            left: -27px;
            box-sizing: border-box;
            padding: 2px 4px;
            writing-mode:vertical-lr;
            transform: rotate(180deg);
            text-align: center;
        }
    }
}